<template>
    <div>
      <!-- 按周  -->
      <div v-if="payday_id === '1'">
        <van-field autocomplete="off"
          readonly
          clickable
          @click="weeklyPicker = true"
          :value="payday_mode_name"
          name="weekly"
          label="按周结算"
          placeholder="点击选择周几发工资(必填)"
          :rules="[{ required: true, message: '未选择发薪日' }]"
          required
        />
        <van-popup v-model="weeklyPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="weeklyColumns"
            @confirm="weeklyConfirm"
            @cancel="weeklyPicker = false"
          />
        </van-popup>
      </div>
      <!--  按月 -->
      <div v-else-if="payday_id === '2'">
        <van-field autocomplete="off"
          readonly
          clickable
          @click="monthlyPicker = true"
          :value="payday_mode_name"
          name="monthly"
          label="按月结算"
          placeholder="点击选择每月几号发工资(必填)"
          :rules="[{ required: true, message: '未选择发薪日' }]"
          required
        />
        <van-popup v-model="monthlyPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="monthlyColumns"
            @confirm="monthlyConfirm"
            @cancel="monthlyPicker = false"
          />
        </van-popup>
      </div>
      <!--  按年 -->
      <div v-else-if="payday_id === '3'">
        <van-field autocomplete="off"
          readonly
          clickable
          @click="showCalendar = true"
          :value="payday_mode_name"
          name="yearly"
          label="按年结算"
          placeholder="点击选择几月几号发工资(必填)"
          :rules="[{ required: true, message: '未选择发薪日' }]"
          required
        />
        <van-calendar
          v-model="showCalendar"
          @confirm="yearlyConfirm"
          :max-date="new Date('2050-1-1')"
        />
      </div>
    </div>
</template>

<script>
  let monthlyColumns = []
  for (let i=1; i < 32; i++){
    monthlyColumns.push('每月'+ i.toString() + '号')
  };


  export default {
    name: 'allTypesPayDay',
    props: ['payday_id', 'payday_mode_name'],



    data(){
      return {
        weeklyPicker: false,
        monthlyPicker: false,
        showCalendar: false,
        weeklyColumns: ['每周一', '每周二', '每周三', '每周四', '每周五', '每周六', '每周日'],
        monthlyColumns,
        yearlyColumns: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    },

    methods: {
      weeklyConfirm(value) {
        this.$emit('getPaydayModeName', value)
        this.weeklyPicker = false;
      },
      monthlyConfirm(value) {
        this.$emit('getPaydayModeName', value)
        this.monthlyPicker = false;
      },
      yearlyConfirm(date) {
        const data = `每年${date.getMonth() + 1}月${date.getDate()}日`;
        this.$emit('getPaydayModeName', data)
        this.showCalendar = false;
      },
    },
  }
</script>

<style scoped>

</style>
